<ion-view cache-view="false" style="background-color:#444444">
  <ion-nav-title>
    <i class="{{typeIcon}}"></i> {{'kMoment24Heading' | translate}}</ion-nav-title>
  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
    &nbsp;
    <button class="button button-icon button-clear ion-gear-b" ng-click="hideUnhide()"></button>

    <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge"
      ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
  </ion-nav-buttons>

  <ion-nav-buttons side="right">

    <a class="button button-icon icon ion-chevron-down" ng-click="toggleSubMenu()" ;></a>

    <a class="button button-icon icon ion-android-more-vertical " ng-click="showPopover($event)" ;>&nbsp;&nbsp;&nbsp;</a>



  </ion-nav-buttons>

  <div class="moment-date">
    {{displayTimeFrom}} - {{displayTimeTo}}</span>
  </div>


  <ion-content delegate-handle="moment-delegate" overflow-scroll="false" mouse-wheel-scroll class="notch-ready" style="background-color:#444444">

    <div ng-if="areImagesLoading" class="screen-note">&nbsp;{{ 'kArrangingImages' | translate }}...&nbsp;</div>

    <div ng-if="isSubMenu">
      <br />
      <div id="flyoutmenu" style="float:left">
        <ul>
          <li>
            <a href="" ng-click="sizeChanged(1)">
              <i class="ion-plus-circled"></i>
            </a>
          </li>
          <li>
            <a href="" ng-click="sizeChanged(-1)">
              <i class="ion-minus-circled"></i>
            </a>
          </li>
          <li>
            <a href="" ng-click="reLayout()">
              <i class="ion-grid"></i>
            </a>
          </li>
          <li>
            <a href="" ng-click="toggleExpandOrCollapse()">
              <i ng-class="!expand ? 'ion-arrow-expand':'ion-arrow-shrink'"></i>
            </a>
          </li>
          <li>
            <a href="" ng-click="toggleIcons()">
              <i ng-class="showIcons? 'ion-eye':'ion-eye-disabled'"></i>
            </a>
          </li>
        </ul>
      </div>

      <div id="flyoutmenu" style="float:right">
        <ul>
          <li>
            <a href="" ng-click="changeFrom(-1)">
              &nbsp;
              <i class="ion-chevron-left"></i>&nbsp;
            </a>
          </li>
          <li>
            <a href="" ng-click="getMoments()">
              &nbsp;
              <i class="ion-location"></i>&nbsp;
            </a>
          </li>
          <li>
            <a href="" ng-click="changeFrom(1)">
              &nbsp;
              <i class="ion-chevron-right"></i>&nbsp;
            </a>
          </li>

        </ul>
      </div>

      <div style="clear: both;"></div>
      <br />
    </div>


    <div style="color:white; text-align:center" ng-if="!moments.length">
      {{loadingStatus}}
    </div>

    <div class="grid" id="mygrid">

     
      <span ng-if="uiReady" class="grid-item grid-item-{{gridSize}}" ng-repeat="moment in moments">
        <figure ng-show="!moment.Event.hide">
          <figcaption ng-show="showIcons" class="normal-figheader">&nbsp;{{::moment.Event.monitorName}}({{::moment.Event.Id}})
            <span style="float:right">
              <button class="button button-small button-icon icon  {{moment.Event.icon}}" ng-click="toggleCollapse(moment.Event.MonitorId, moment.Event.Id)"></button>{{moment.Event.collapseCount}}&nbsp;</span>
          </figcaption>
          <img image-spinner-src="{{::constructFrame(moment)}}" img-spinner-w="{{::moment.Event.width}}" img-spinner-h="{{::moment.Event.height}}"
            image-spinner-loader="lines" on-tap="playEvent(moment)" />
  
          <div ng-show="showIcons" class="normal-subfigcaption">
            <button ng-class="moment.Event.pinned?  'button button-small button-icon icon ion-ios-flag assertive': 'button button-small button-icon icon ion-pin'"
              ng-click="togglePin(moment.Event.Id)"></button>
  
          </div>
          
          <figcaption ng-show="showIcons" class="normal-figcaption">&nbsp;{{::moment.Event.humanizeTime}}
            <span style="float:right">{{::hourmin(moment.Event.StartTime)}}&nbsp;</span>
          </figcaption>
        </figure>

      </span>


    </div>

  </ion-content>
</ion-view>
